<template>
  <el-dialog title="编辑用户" :visible.sync="formPage.show">
    <el-form :model="formPage.formData" :inline="true" label-position="left" class="gds_form" :rules="rules" ref="userAddForm" style='width: 400px; margin-left:50px;'>
      <el-input size="mini" v-model="formPage.formData.id" auto-complete="off" type="hidden"></el-input>
      <el-form-item  label="账号" :label-width="formLabelWidth" prop="loginname">
        <el-input size="mini" v-model="formPage.formData.loginname" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
        <el-input size="mini" v-model="formPage.formData.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
        <el-input size="mini" v-model="formPage.formData.phone" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth" >
        <el-radio-group v-model="formPage.formData.sex" size="mini">
          <el-radio label="0" border>男</el-radio>
          <el-radio label="1" border>女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所属部门" :label-width="formLabelWidth" prop="pids">
        <el-cascader
          size="mini"
          :options="formPage.cascader_data"
          :show-all-levels="false" :props="props"
          v-model="formPage.formData.pids"
          @change="addPid"
          change-on-select
        ></el-cascader>
      </el-form-item>
      <el-form-item label="角色" :label-width="formLabelWidth">
        <el-input size="mini" v-model="formPage.formData.roleName" auto-complete="off" disabled></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="formPage.show = false" size="mini">取 消</el-button>
      <el-button type="primary" @click="sumbitForm" size="mini">确 定</el-button>
      <el-button @click="resetForm('roleAddForm')" size="mini">重置</el-button>
    </div>
  </el-dialog>
</template>

<script>

     import {sumbitUser} from "@/api/user/user";
     export default {
        name: "userAdd",
        props:['formPage'],
      data() {
        return {
          formLabelWidth: '100px',
          props: {
            value: 'id',
            label:'simpleName',
            children: 'children'
          },
          rules: {
            loginname: [{ required: true, message: '账号不能为空', trigger: 'change' }],
            name: [{ required: true, message: '姓名不能为空', trigger: 'change' }],
            phone:[{ required: true, message: '手机号不能为空', trigger: 'change' }],
            pids:[{ required: true, message: '必须选择部门', trigger: 'change' }]
          },
          addModel:{
            name: '',
            loginname:'',
            sex:'',
            deptId:'',
            phone:'',
            id: '',
          }
        };
      },
      methods:{
        sumbitForm(){
          this.$refs['userAddForm'].validate((valid) => {

            if (valid) {
              for(var p in  this.addModel){//遍历json对象的每个key/value对,p为key
                this.addModel[p]=this.formPage.formData[p]
              }
              // console.log(this.addModel)
              // return ;
              sumbitUser(this.addModel).then(response => {
                if(response){
                  this.$message({
                    message: response.data.mesg,
                    type: 'success',
                    duration: 5 * 1000
                  })
                  this.$parent.$parent.$parent.onSearch()
                  this.formPage.show = false;
                }
              }).catch(error => {
                console.log(error)
              });
            }
          })
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        addPid(aaa){

          if(aaa.length==1){
            this.formPage.formData.deptId=aaa[0]
          }
          else {
            this.formPage.formData.deptId=aaa[aaa.length-1]
          }
          console.log(this.formPage.formData)
        },
      },
      mounted(){
          // console.log(this.formPage.formData)
      }

    }
</script>

<style scoped>

</style>
